<template>
  <div class="frame-bg">
    <div class="frame-body">
      <div class="frame-aside">
        <a-steps :current="current" direction="horizontal">
          <a-step title="公司详情"></a-step>
          <a-step title="职位详情"></a-step>
          <a-step title="职位要求"></a-step>
        </a-steps>

        <div class="frame-main">
          <div class="main-content">

            <!-- Step 1: 公司详情 -->
            <template v-if="current === 1">
              <a-form :model="corporateForm" :style="{width:'600px'}">
                <a-row :gutter="16">
                  <a-col :span="24">
                    <a-form-item field="titleName" label="标题" validate-trigger="input" required>
                      <a-input v-model="corporateForm.titleName" placeholder="请输入内容..."/>
                    </a-form-item>
                  </a-col>
                  <a-col :span="24">
                    <a-form-item field="corporateName" label="公司名称" validate-trigger="input" required>
                      <a-input v-model="corporateForm.corporateName" placeholder="请输入公司名称..." />
                    </a-form-item>
                  </a-col>
                  <a-col :span="24">
                    <a-form-item field="companyAddress" label="公司地址" validate-trigger="input" required>
                      <a-input v-model="corporateForm.companyAddress" placeholder="请输入公司具体位置" />
                    </a-form-item>
                  </a-col>
                  <a-col :span="24">
                    <a-form-item field="coverPhoto" label="封面图片" validate-trigger="input">
                      <el-upload
                          list-type="picture-card"
                          action="http://localhost:8080/v1/file/upload"
                          v-model:file-list="fileList1"
                          limit="1"
                          :on-change="handleUpload1"
                          :on-remove="handleRemove"
                      >
                        <el-icon><Plus /></el-icon>
                      </el-upload>

                    </a-form-item>
                  </a-col>
                  <a-col :span="24">
                    <a-form-item field="" label="公司图片展示" validate-trigger="input">
                      <el-upload
                          list-type="picture-card"
                          action="http://localhost:8080/v1/file/upload"
                          v-model:file-list="fileList2"
                          limit="9"
                          :on-change="handleUpload2"
                          :on-remove="handleRemove">
                        <el-icon><Plus /></el-icon>
                      </el-upload>
                    </a-form-item>
                  </a-col>

                </a-row>
              </a-form>
            </template>

            <!-- Step 2: Job Details -->
            <template v-if="current === 2">
              <a-form :model="corporateForm" :style="{width:'600px'}">
                <a-row :gutter="16">
                  <a-col :span="24">
                    <a-form-item field="salary" label="职位待遇" validate-trigger="input" required>
                      <a-input v-model="corporateForm.salary" placeholder="职位待遇..." />
                    </a-form-item>
                  </a-col>
                  <a-col :span="24">
                    <a-form-item field="jobType" label="招聘类型" validate-trigger="input" required>
                      <a-select v-model="corporateForm.jobType" placeholder="实习类型...">
                        <a-option>实习</a-option>
                        <a-option>校招</a-option>
                      </a-select>
                    </a-form-item>
                  </a-col>
                  <a-col :span="24">
                    <a-form-item field="industryClassification" label="行业分类" validate-trigger="input" required>
                      <a-input v-model="corporateForm.industryClassification" placeholder="行业分类..." />
                    </a-form-item>
                  </a-col>
                  <a-col :span="24">
                    <a-form-item field="numberOfRecruits" label="招聘人数" validate-trigger="input" required>
                      <a-input v-model="corporateForm.numberOfRecruits" placeholder="请输入招聘人数..." />
                    </a-form-item>
                  </a-col>
                  <a-col :span="24">
                    <a-form-item field="recruitmentCity" label="招聘城市" validate-trigger="input" required>
                      <a-input v-model="corporateForm.recruitmentCity" placeholder="请输入招聘城市..." />
                    </a-form-item>
                  </a-col>
                  <a-col :span="24">
                    <a-form-item field="employmentOpportunities" label="是否有转正机会" validate-trigger="input" required>
                      <a-radio-group v-model="corporateForm.employmentOpportunities">
                        <a-radio value="1">是</a-radio>
                        <a-radio value="0">否</a-radio>
                      </a-radio-group>
                    </a-form-item>
                  </a-col>
                </a-row>
              </a-form>
            </template>

            <!-- Step 3: Company Information -->
            <template v-if="current === 3">
              <a-form :model="corporateForm" :style="{width:'600px'}">
                <a-row :gutter="16">
                  <a-col :span="24">
                    <a-form-item field="jobDetail" label="岗位详情要求" validate-trigger="input" required>
                      <a-textarea v-model="corporateForm.jobDetail"
                                  placeholder="岗位详情要求..."
                                  class="input-height-adjust"
                                  :max-length="500" allow-clear show-word-limit/>
                    </a-form-item>
                  </a-col>
                  <a-col :span="24">
                    <a-form-item field="educationalRequirements" label="学历要求" validate-trigger="input" required>
                      <a-select v-model="corporateForm.educationalRequirements" placeholder="...">
                        <a-option value="10">大专</a-option>
                        <a-option value="20">本科</a-option>
                        <a-option value="30">硕士</a-option>
                      </a-select>
                    </a-form-item>
                  </a-col>
                  <a-col :span="24">
                    <a-form-item field="weekDay" label="每周实习天数" validate-trigger="input" required>
                      <a-input v-model="corporateForm.weekDay" placeholder="..." />
                    </a-form-item>
                  </a-col>
                  <a-col :span="24">
                    <a-form-item field="internshipMonthDuration" label="实习总月份" validate-trigger="input" required>
                      <a-input v-model="corporateForm.internshipMonthDuration" placeholder="..." />
                    </a-form-item>
                  </a-col>
                </a-row>
              </a-form>
            </template>
          </div>
          <div class="main-bottom">
            <div class="main-bottom">
              <a-button :disabled="current===1" @click="onPrev">
                <icon-left />
                上一步
              </a-button>
              <a-button v-if="current === 3" type="primary" @click="submitRecruit">提交</a-button>
              <a-button v-if="current != 3" :disabled="current===3" @click="onNext">
                下一步
                <icon-right />
              </a-button>
            </div>
          </div>
        </div>

      </div>

    </div>
  </div>
</template>

<script>
import {onMounted, ref} from 'vue';
import axios from "axios";
import qs from "qs";
import {ElMessage} from "element-plus";
import router from "@/router";

export default {
  setup() {
    const current = ref(1); // 初始步骤为第二步
    const user = ref(getUser());
    //存放图片的数组
    const fileList1 = ref([]);
    const fileList2 = ref([]);
    //公司部分信息
    const corporateForm = ref({
      titleName: '',
      corporateName: '',
      corporateLevel: '',
      companyAddress:'',
      // hr和company的id暂时设置为1
      hrId:'',
      companyId:'',
      coverPhoto:'',
      photoShow:'',
      hits:'',
      salary:'',
      welfare:'',
      jobType:'',
      jobDetail:'',
      industryClassification:'',
      educationalRequirements:'',
      numberOfRecruits:'',
      releaseTime:'',
      weekDay:'',
      internshipMonthDuration:'',
      recruitmentCity:'',
      employmentOpportunities:'',
    });

    //页面一刷新就先检验是否
    onMounted(()=>{

      // 校验是否为登录状态 @RequestMapping("isLogin")
      axios.get(BASE_URL + '/v1/user/isLogin').then((response)=>{
        const isLogin = response.data.msg;
        console.log("登录状态"+isLogin)
        if (isLogin){
          console.log("登录状态"+isLogin)
          let id = user.value.userId;
          axios.get(BASE_URL + '/v1/hr/getHrInfo' + id).then((response)=>{
            if (response.data.code == 2000){
              if (response.data.data.examineState == '待审核'){
                ElMessage.error("请等待公司审核通过哦");
                router.push("/");
              }
            }
          })
          //获取当前hr的id，和当前公司的id
          corporateForm.value.hrId = id;


          //从hr_users表中获取当前公司id
          axios.get(BASE_URL + '/v1/hr/getCompanyId' + id).then((response)=>{
            if (response.data.code == 2000){
              corporateForm.value.companyId = response.data.data.companyId;
              let companyId = corporateForm.value.companyId;
              axios.get(BASE_URL + '/v1/hr/selectCompanyInfoByCompanyId' + companyId).then((response)=>{
                if (response.data.code == 2000){
                  corporateForm.value.corporateName = response.data.data.corporateName;
                  corporateForm.value.companyAddress = response.data.data.companyAddress;
                }
              })
            }
          })



        }else {
          ElMessage.error("请先登录");
          router.push("/");
        }
      })
    })


    const onPrev = () => {
      current.value = Math.max(1, current.value - 1);
    };

    const onNext = () => {
      current.value = Math.min(3, current.value + 1);
    };

    //判断用户是否上传了图片
    //判断是否上传图片
    const handleUpload1 = () =>{
      if (fileList1.value.length > 0){//说明用户传图片了
        console.log("用户上传了图片******************");
        let imgUrls = [];//准备数组,用来存多张图片路径
        for (let file of fileList1.value){//遍历响应式数组
          //依次遍历得到每个文件的响应路径
          let imgUrl = file.response.data;
          //每得到一个路径,就存入imgUrls数组中
          imgUrls.push(imgUrl);

        }
        //循环结束,得到所有的图片路径,将路径赋值给corporateForm对象
        corporateForm.value.coverPhoto = imgUrls.toString();
        console.log(corporateForm.value.coverPhoto)
      }
    }
    const handleUpload2 = () =>{
      if (fileList2.value.length > 0){//说明用户传图片了
        console.log("用户上传了图片******************");
        let imgUrls = [];//准备数组,用来存多张图片路径
        for (let file of fileList2.value){//遍历响应式数组
          //依次遍历得到每个文件的响应路径
          let imgUrl = file.response.data;
          //每得到一个路径,就存入imgUrls数组中
          imgUrls.push(imgUrl);

        }
        //循环结束,得到所有的图片路径,将路径赋值给corporateForm对象
        corporateForm.value.photoShow = imgUrls.toString();
        console.log(corporateForm.value.coverPhoto)
      }
    }

    //移除图片
    const handleRemove = (uploadFile, uploadFiles) => {
      console.log(uploadFile, uploadFiles);
      //1.得到要删除的图片路径 uploadFile就是我们上传的图片文件对象
      let imgUrl = uploadFile.response.data;
      //2.给后端发请求,删除图片
      axios.post(BASE_URL+'/v1/file/remove?imgUrl='+imgUrl).then((response)=>{
        if (response.data.code==2000){
          ElMessage.success('图片移除成功!');
        }
      })
    };

    const submitRecruit = () => {
      let data = qs.stringify(corporateForm.value);
      console.log(data);
      axios.post(BASE_URL + '/v1/hr/postRecruit', data).then((response)=>{
        if(response.data.code == 2000){
          ElMessage.success("发布成功")

        }else {
          ElMessage.error(response.data.msg);
        }
      })
    };

    return {
      current,
      corporateForm,
      fileList1,
      fileList2,
      user,
      onPrev,
      onNext,
      submitRecruit,
      handleRemove,
      handleUpload1,
      handleUpload2,
    };
  },
};


</script>


<style scoped>
.frame-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--color-bg-2);

}

.frame-aside {
  padding: 20px;
  height: 20px;
  //border-right: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.frame-main {
  width: 100%;
  padding-top: 20px;
  justify-content: center; /* Center the form horizontally */
  align-items: center; /* Center the form vertically */

}

.main-content {
  text-align: center;
  line-height: 200px;
}

.main-bottom {
  display: flex;
  justify-content: center;

  button {
    margin: 0 20px;
  }
}

.input-height-adjust {
  height: 200px; /* 根据需要调整高度 */
}

</style>